<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交记录详情</title>
    <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Bootstrap 4-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        /*导航栏样式*/
        .navbar {
            background-color: #222;
        }
        #daohang {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: transparent;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        /*!*鼠标移动到选项上修改背景颜色 *!*/
        li a:hover {
            background-color: #111;
        }
        .active {
            background-color: black;
        }

        .col-sm-new {
            border-radius: 15px;
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%; }
        /*  页码样式  */
        ul{
            height:100%;
            list-style-type:none;
        }

        li{
            line-height:20px;
            float:left;
        }
        .div{
            background-color: #f5f4f4;
            border-radius: 0.5rem;
            padding: 20px;
        }
        p{
            display: inline-block;
        }

    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
    <a class="navbar-brand font-weight-bold" href="index.html">别叫我 OJ </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <ul id="daohang">
        <li>
            <div id="detail" align="right">
                <a style="color: white" href="questionDetail.html">问题详情</a>
            </div>
        </li>
        <li>
            <div class="active" id="remind" align="right">
                <a style="color: white" href="submitRecord.html">提交记录</a>
            </div>
        </li>
        <li>
            <div id="analyze" align="right">
                <a style="color: white" href="answer.html">题解</a>
            </div>
        </li>
    </ul>
    <div class="collapse navbar-collapse" id="topMenu">
        <ul class="navbar-nav ml-auto">
            <div style="margin:5px" id="backToIndex" align="right">
                <a style="color: white" href="index.html"> 返回首页</a>
            </div>
            <div style="margin:5px" id="javaoj" align="right">
                <a style="color: white" href="login.html" onclick="logout()"> 退出登录</a>
            </div>
        </ul>
    </div>
</nav>
<section class="my-5 pt-5">
    <div class="container">
        <div class="row mb-2" id="tables">
            <div class="col-sm-new">
                <div class="mt-3 mb-5">
                    <div><a style="float: right" onclick="goBack()">返回查看所有提交记录</a></div>
                    <h3 style="margin-bottom: 20px" id="title"></h3>
                    <div class="div" style="background-color: white">
                        <div style="display: inline-block;margin-right: 200px">
                            <p>作者：</p>
                            <a id="username" href="userDetail.html"></a>
                        </div>
                        <div style="display: inline-block;margin-right: 200px">
                            <p>结果：</p>
                            <p id="status"></p>
                        </div>
                        <div style="display: inline-block;margin-right: 200px">
                            <p>运行时间：</p>
                            <p id="runTime"></p>
                        </div>
<!--                        <div style="display: inline-block;margin-right: 200px">-->
<!--                            <p>运行空间：</p>-->
<!--                            <p id="runMemory"></p>-->
<!--                        </div>-->
                        <div style="display: inline-block;margin-right: 200px">
                            <p>提交时间：</p>
                            <p id="createTime"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="language" style="font-size: 20px;background-color: white;padding: 10px;border-radius: 0.3rem"></div>
        <div class="row mb-5" id="forms">
            <div class="col-sm-new">
                <div class="row mt-4">
                    <div class="col-sm-new pb-4">
                        <form role="form">
                            <div class="editor-header">
                                <select id="theme" class="form-control form-control-plus" onchange="initAce(false)">
                                    <option>环境配色</option>
                                    <option value="ace/theme/twilight">twilight</option>
                                    <option value="ace/theme/eclipse" selected>eclipse</option>
                                    <option value="ace/theme/dracula">dracula</option>
                                </select>
                                <div class="flex-btn" onclick="expand('spanid')">
                                    <span class="glyphicon glyphicon-resize-full" id="spanid"></span>
                                </div>
                            </div>
                        </form>
                        <form>
                            <div class="form-group">
                                <label for="codeEditor"></label>
                                <div id="editor" style="min-height:400px">
                                    <textarea class="form-control" id="codeEditor"  style="width: 100%;  height:400px;"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <h5>错误原因</h5>
        <div class="div" id="errorReason" style="background-color: white"></div>
    </div>


</section>
<!--footer-->
<section class="py-5 bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                <p class="pt-2 text-muted">
                    &copy; by <a href="aboutUs.html" target="_blank">别叫我们组</a>
                </p>
            </div>
        </div>
    </div>
</section>
<script src="js/jquery.min.js"></script>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>-->
<!-- 引入 ace.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ace.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ext-language_tools.js"></script>
<script>
    //查看全部记录的点击事件
    function goBack(){
        window.history.back();
    }
    //拆地址,获取recordId参数
    function getQueryString(value) {
        const reg = new RegExp("(^|&)" + value + "=([^&]*)(&|$)", "i");
        const r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    //访问地址,获得recordId
    const recordId = getQueryString('recordId');

    //获取questionId
    var problemId = getCookie("problemId");
    // 如果本机cookie没有数值，则赋初值
    if(problemId==undefined){
        problemId=1;
    }

    var userId=localStorage.getItem("userId");
    var username=localStorage.getItem("username");
    let name = document.getElementById("username");
    name.innerText=username;
    //通过id获取元素
    let title = document.getElementById("title");
    let status = document.getElementById("status");
    let runTime = document.getElementById("runTime");
    // let runMemory = document.getElementById("runMemory");
    let creatTime = document.getElementById("createTime");
    let language = document.getElementById("language");
    let codeEditor = document.getElementById("codeEditor");
    let errorReason = document.getElementById("errorReason");
    getNews()
    function getNews() {
        $.ajax({
            url: "http://192.168.47.129:8010/user/queryRecord/"+recordId,
            type: "GET",
            success: function (data, status) {
                makeData(data);
            },
        })
    }
    getTitle(problemId);
    function getTitle(id){
        $.ajax({
            url:"http://localhost:8020/question/findQuestion/" + id,
            type:"GET",
            success:function(data,status){
                title.innerHTML=data.data.title;
            },
        })
    }

    function makeData(data){
        status.innerHTML=data.data.status;
        if (data.data.runTime == null){
            runTime.innerHTML="数据不详";
        }else {
            runTime.innerHTML=data.data.runTime + "s";
        }
        creatTime.innerHTML=data.data.createTime;
        language.innerHTML=data.data.language;
        let editor = ace.edit("editor");
        editor.setValue(data.data.answer);
        errorReason.innerHTML=data.data.reason;
    }



    function initAce(arg) {
        let language = $("#language").val();
        let mode;
        if (language == "java") mode = "java";
        else if (language == "c++") mode = "c_cpp";
        else if (language == "c") mode = "c9search";
        else if (language == "python") mode = "python";
        console.log(mode);
        console.log($("#theme").val());
        // 参数 editor 就对应到刚才在 html 里加的那个 div 的 id
        let editor = ace.edit("editor");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        editor.setTheme($("#theme").val());
        editor.session.setMode("ace/mode/"+mode);
        editor.resize();
        if (arg) {
            editor.setValue("");
        }
        document.getElementById('editor').style.fontSize = '20px';

        return editor;
    }
    let editor = initAce(true);

    getUser();
    function getUser(){
        if (userId==null){
            location.assign("login.html");
        }
    }
    function logout(){
        localStorage.clear();
    }

    //获取指定name的cookie值
    function getCookie(name){
        var arr1=document.cookie.split(";");
        for(var i=0;i<arr1.length;i++){
            var arr2=arr1[i].split("=");//通过=截断，把name=Jack截断成[name,Jack]数组；
            if(i != 0){
                var now = " " + name;
            }else {
                var now=name;
            }
            if(arr2[0]==now){
                return decodeURI(arr2[1]);
            }
        }
    }


</script>
</body>
</html>